<template>
    <div class="box1">
        <ul class="listBox">
            <li  ref="nav" v-for="(data,index) in navList" :key="index" @click="handclick(index)">
                <p>{{data.name}}</p>
            </li>
        </ul>
    </div>
</template>

<script>
export default {
  data () {
    return {
      navList: [
        {
          name: '新品推荐',
          path: '/'
        },
        {
          name: '手机',
          path: '/'
        },
        {
          name: '笔记本',
          path: '/'
        },
        {
          name: '平板',
          path: '/'
        },
        {
          name: '智能穿戴',
          path: '/'
        },
        {
          name: '智慧屏',
          path: '/'
        },
        {
          name: '路由',
          path: '/'
        },
        {
          name: '耳机音响',
          path: '/'
        },
        {
          name: '生态产品',
          path: '/'
        },
        {
          name: '专属配件',
          path: '/'
        },
        {
          name: '通用配件',
          path: '/'
        }
      ]
    }
  },

  methods: {
    handclick (index) {
      for (let i = 0; i < this.navList.length; i++) {
        this.$refs.nav[i].style.background = '#f8f8f8'
        this.$refs.nav[i].children[0].style.color = '#404040'
      }
      this.$refs.nav[index].style.background = '#ffffff'
      this.$refs.nav[index].children[0].style.color = 'red'

      this.$bus.$emit('aMsg', index)
    }
  }
}
</script>

<style scoped>
.box1 {
    width: 25%;
    height: 31.25rem;
    float: left;
    background-color: #f8f8f8;
    margin-top: 3rem;
}
.box1 li{
    width: 100%;
    line-height: 45px;
    text-align: center;
}
.box1 li p{
    font-size: 14px;
    font-family: "Helvetica Neue", "Helvetica";
    color: #404040;

}
.listBox li:nth-child(1){
    background-color: white;

}
.listBox li:nth-child(1) p{
    color: red;

}
</style>
